<template>
  <view class="pay-type">
    <view class="top-money column-center">
      <view class="name">诚聘会员费</view>
      <view class="money">90.00 </view>
      <view class="time">开始时间: 2025-04-03 </view>
      <view class="time">到期时间: 2025-04-03</view>
    </view>
    <view class="pay-list">
      <view class="title">支付方式</view>
      <view class="pay-list-item justify-between flex" v-for="item in payList" :key="item.type" @click="changeFun(item)">
        <view class="row">
          <image :src="item.iconPath" class="iconPath"></image>
          <text>{{ item.tag }}</text>
        </view>
        <image :src="current == item.type ? img2 : img1" class="sel"></image>
        <!-- <image src="@/static/img/item-sel.png" class="sel"></image> -->
      </view>
    </view>
    <!-- <bottomBtn text="确认支付" @clickFun="saveFun" /> -->
    <bottom-button :isFixed="true" @sendFun="saveFun" text="确认支付"></bottom-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      img1: this.$mConfig.imageUrl + '/image/item-nor.png',
      img2: this.$mConfig.imageUrl + '/image/checkmark.png',
      payList: [
        // {
        //   type: 1,
        //   iconPath: require('@/static/images/ic_zhifubaozhifu.png'),
        //   tag: '支付宝',
        // },
        {
          type: 2,
          iconPath: this.$mConfig.imageUrl + '/image/ic_weixinzhifu.png',
          tag: '微信支付',
        },
        // {
        //   type: 3,
        //   iconPath: require('@/static/images/ic_yinhangqiaguanli.png'),
        //   tag: '银行卡',
        // },
      ],
    }
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.id = options.id
    // this.getOrderResultFun();
  },

  methods: {
    changeFun(item) {
      this.current = item.type
    },
    saveFun() {
      uni.navigateTo({
        url: '/pages/user/members/waiting',
      })
    },
  },
}
</script>
<style lang="scss">
.pay-type {
  .top-money {
    padding-top: 72rpx;
    font-size: 30rpx;
    color: #222222;
    text-align: center;
    .money {
      font-size: 74rpx;
      font-weight: bold;
      margin-top: 42rpx;
      padding-bottom: 58rpx;
    }
    .time {
      font-size: 24rpx;
      color: #4e6078;
      line-height: 40rpx;
    }
  }
  .pay-list {
    padding: 0 30rpx;
    padding-top: 122rpx;
    .title {
      font-size: 32rpx;
      color: #222222;
      font-weight: bold;
    }
    .pay-list-item {
      color: #999999;
      font-size: 30rpx;
      padding: 40rpx 0;
      border-bottom: 1px solid #efefef;
      .iconPath {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }
      .sel {
        width: 42rpx;
        height: 42rpx;
      }
      &:last-child {
        border-bottom: 0;
      }
    }
  }
}
</style>
